<!--
 * @Author: wu07 1732042133@qq.com
 * @Date: 2023-02-01 16:35:08
 * @LastEditors: wu07 1732042133@qq.com
 * @LastEditTime: 2023-02-01 16:53:26
 * @FilePath: \recruitAPP\recruitApp\recruitApp\src\pages\user\Me\Degree.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 视图层 -->
<template>
  <van-nav-bar
    title="教育经历"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="school"
        name="school"
        label="学校"
        placeholder="学校名称"
        :rules="[{ required: true, message: '请填写学校名称' }]"
      />
      <van-field
        v-model="result"
        is-link
        readonly
        name="picker"
        label="专业"
        placeholder="请选择"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
        v-model="resultOne"
        is-link
        readonly
        name="degree"
        label="学历"
        placeholder="请选择"
        @click="showPickerOne = true"
      />
      <van-popup v-model:show="showPickerOne" position="bottom">
        <van-picker
          :columns="columnsOne"
          @confirm="onConfirmOne"
          @cancel="showPickerOne = false"
        />
      </van-popup>
      <van-field
        v-model="time"
        name="time"
        label="工作时间"
        placeholder="工作时间(例:2020.1-2022.2)"
        :rules="[{ required: true, message: '请填写工作时间' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<!-- 逻辑层 -->
<script setup>
import { ref } from "vue";
const school = ref("");
// 导入useRouter方法
import { useRouter } from "vue-router";
const router = useRouter();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
const onSubmit = (values) => {
  console.log("submit", values);
};
const result = ref("");
const showPicker = ref(false);
const columns = [
  { text: "软件工程", value: "Hangzhou" },
  { text: "汉语言", value: "Ningbo" },
  { text: "机械自动化", value: "Wenzhou" },
  { text: "语文", value: "Shaoxing" },
  { text: "计算机科学", value: "Huzhou" },
];

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};

const resultOne = ref("");
const showPickerOne = ref(false);
const columnsOne = [
  { text: "初中", value: "secondary" },
  { text: "高中", value: "high" },
  { text: "中专", value: "technical" },
  { text: "大专", value: "junior" },
  { text: "本科", value: "undergraduate" },
  { text: "硕士", value: "msc" },
  { text: "博士", value: "dr" },
];

const onConfirmOne = ({ selectedOptions }) => {
  resultOne.value = selectedOptions[0]?.text;
  showPickerOne.value = false;
};
const time = ref("");
</script>
<!-- 样式层 -->
<style scoped>
</style>